<template>
  <a-modal
    class="custom-optionsmodal-dialog-box"
    :title="dialogTitle"
    :class="iconType"
    :visible="dialogState"
    :width="dialogWidth"
    :mask-closable="false"
    @cancel="handleCancel(false)"
  >
    <div v-if="iconType === 'default'" class="custom-content">
      <slot name="location"></slot>
    </div>
    <div v-else class="content">
      <i v-if="showIcon" :class="'icon-' + iconType" class="icon"></i>
      <div class="text-container">
        <template v-if="html === 'html'">
          <div class="text" v-html="contentText"></div>
        </template>
        <template v-else>
          <span class="text">{{ contentText }}</span>
          <span v-if="subContentText" class="sub-text">{{ subContentText }}</span>
        </template>
      </div>
    </div>
    <template v-slot:footer>
      <div v-if="footer" :class="draftBoxVisible ? 'footer' : 'footers'">
        <div v-if="draftBoxVisible" class="restore-default" @click="putDraftBox">
          <span>放入草稿箱</span>
        </div>
        <div>
          <a-button v-if="otherBtn" class="bg-color-white" @click="handleOther(false)">
            {{ btnTitle }}
          </a-button>
          <a-button v-else class="bg-color-white" @click="handleCancel(false)">
            {{ btnTitle }}
          </a-button>
          <a-button v-if="determineBtn" class="btn" type="primary" @click="handleOk(false)">{{
            btnState
          }}</a-button>
        </div>
      </div>
      <!-- 底部按钮为空 -->
      <div v-else></div>
    </template>
  </a-modal>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    html: {
      // 内容状态
      type: String,
      default: '取消'
    },
    dialogState: Boolean, // 弹窗状态
    draftBoxVisible: Boolean, // 是否显示加入草稿箱
    dialogTitle: String, // 弹窗标题
    showIcon: Boolean, // 是否显示图标
    iconType: String, // 警告图标  default: 自定义内容； warring：警告； success：成功
    contentText: String, // 弹窗内容
    subContentText: String, // 弹窗内容(提示语)
    dialogWidth: String, // 弹窗宽度
    footer: {
      // 是否显示确定 取消按钮
      type: Boolean,
      default: true
    },
    determineBtn: {
      // 是否显示确定按钮
      type: Boolean,
      default: true
    },
    otherBtn: {
      // 是否显示其他按钮
      type: Boolean,
      default: false
    },
    btnTitle: {
      // 取消按钮文案
      type: String,
      default: '取消'
    },
    btnState: {
      // 确定 按钮状态
      type: String,
      default: '确定'
    }
  },
  emits: {
    putDraftBox: null, // 加入草稿箱
    handleOk: null, // 确定事件
    handleOther: null, // 其他按钮事件
    handleCancel: null // 取消事件
  },
  setup(props, context) {
    function handleCancel(state) {
      context.emit('handleCancel', state);
    }
    function handleOk(state) {
      context.emit('handleOk', state);
    }
    function putDraftBox() {
      context.emit('putDraftBox');
    }
    function handleOther(state) {
      context.emit('handleOther', state);
    }
    return {
      handleCancel,
      handleOk,
      putDraftBox,
      handleOther
    };
  }
});
</script>
<style lang="less" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d6aa56;
  cursor: pointer;
  font-size: 14px;
}
.footers {
  display: flex;
  justify-content: flex-end;
}
.content {
  display: flex;
  width: 100%;
  padding: 12px 16px;
  background: #f8f8f8;
  border-radius: 4px;
  .text-container {
    display: flex;
    flex-direction: column;
    color: #666666;
    .text {
      line-height: 24px;
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-400;
      font-weight: 400;
      color: #666666;
    }
    .sub-text {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
  }
}
.icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  flex-shrink: 0;
}
.icon-success {
  background: url('../../assets/icons/images/message_icon_success.png') no-repeat center;
  background-size: 100% 100%;
}
.icon-error {
  background: url('../../assets/icons/images/message_icon_fail.png') no-repeat center;
  background-size: 100% 100%;
}
.icon-system {
  background: url('../../assets/icons/images/message_icon_success.png') no-repeat center;
  background-size: 100% 100%;
}
.icon-warring {
  background: url('../../assets/icons/images/Message_icon-alert.png') no-repeat center;
  background-size: 100% 100%;
}
.icon-warring-red {
  background: url('../../assets/icons/images/exclamation_icon_circle.png') no-repeat center;
  background-size: 100% 100%;
}
.btn {
  color: #fff !important;
}
</style>
<style lang="less">
// 组件默认样式覆盖
.custom-optionsmodal-dialog-box {
  .micro-ant-modal-header,
  .micro-ant-modal-footer {
    border: none;
  }
  .micro-ant-modal-title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    line-height: 26px;
  }
  .micro-ant-modal-body {
    padding: 0 24px;
  }
  .micro-ant-modal-footer {
    padding: 24px;
  }
  .micro-ant-modal-close-x {
    color: #c2c2c2;
  }
}
.bg-color-white {
  font-size: 14px !important;
  font-family: Source Han Sans CN, Source Han Sans CN-400;
  font-weight: 400;
  color: #999999 !important;
}
.bg-color-white:hover {
  border-color: var(--themecolor5) !important;
  color: var(--themecolor5) !important;
}
</style>
